<template>
  <div>
      <div v-if="loading" class="loading"><van-loading /></div>
    <div class="box">
      <div class="boxhead">
        <div class="searchform">
          <div class="sele-mouth" @click="TimeSele">
            <img src="../../assets/data.png" alt="">
            <span>{{ chicoMouth }}</span>
          </div>
          <div class="sele-mouth mall" @click="channelSele">
            <span class="xiangmu" v-if="!projectName">选择项目</span>
            <span class="xiangmu">{{projectName}}</span>
            <van-icon name="arrow-down" />
          </div>
          <div class="sele-mouth" @click="changecenter">
            <span class="xiangmu" v-if="!centerName">选择中心</span>
            <span class="xiangmu" style="display:inline-block;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;width:75%">{{centerName}}</span>
            <van-icon  name="arrow-down" />
          </div>
        </div>
        <div class="exponent">
          <div  class="exponLeft">
            <span style="font-size:36px" v-if="data.actual">{{data.actual.arrived_num}}</span>
            <div style="margin-left:10px" v-if="data.diff&&data.diff.arrived_num && data.diff.arrived_num!==0">
              <img v-if="+data.diff.arrived_num > 0" src="../../assets/top.png" alt="">
              <img v-if="+data.diff.arrived_num < 0" src="../../assets/bottom.png" alt="">
              <span style="font-size:16px;margin-left:-4px;margin-bottom:-8px">{{data.diff.arrived_num}}</span>
            </div>
          </div>
          <div class="exponRight" v-if="chicoMouth==newtime">
            <span>今日到诊：</span>
            <span>{{data.now_arrived_num}}</span>
          </div>
        </div>
        <!-- card -->
        <div class="card">
          <div class="cardcenten">
              <div class="cardtop">
                <div class="cardleft">
                  <div class="font">消费</div>
                  <div class="count" style="border-right: 1px solid #bbbbbb" v-if="data.actual">¥{{data.actual.plan_consume}}</div>
                </div>
                <div class="cardright">
                  <div class="font">到诊成本</div>
                  <div class="count" v-if="data.actual">¥{{data.actual.arrived_cost}}</div>
                </div>
              </div>
            <div class="progress" v-if="data.finish_rate" style="width:95%">
              <van-progress :percentage="data.finish_rate>=100?100:data.finish_rate"  color="#ffd07a" track-color="#f00" style="width:100%;margin-top: 5px;"/>
              <span style="width:30px;margin-left:8px;font-size:12px;color:#dae8fd">{{data.finish_rate}}%</span>
            </div>
          </div>
        </div>
        <div style="padding-bottom:48px;">
          <div class="listbox" v-for="item in data.list" :key="item.id">
            <div class="listhead">
              <span style="font-size:20px;font-weight:bolder;">{{item.name}}</span>
              <div style="margin-left:48px;padding-top:6px;">
                <van-icon name="gold-coin-o" />
                <span style="font-weight:bold">¥{{Math.ceil(item.actual.plan_consume)}}</span>
              </div>
              <div  style="margin-left:24px;padding-top:6px;">
                <van-icon name="replay" />
                <span style="font-weight:bold">{{item.actual.conver_rate}}%</span>
              </div>
            </div>
            <div class="formlist">
              <div style="width:30%">
                <div style="color:#777">到诊</div>
                <div style="border-right:1px solid #f2f2f2;font-weight:bold;">
                  <div style="display:flex;padding:12px 0">
                    <span style="font-size:22px;color:#555">{{item.actual.arrived_num}}</span>
                    <div style="margin-left:10px;display:flex" v-if="item.diff.arrived_num &&item.diff.arrived_num!==0">
                      <img class="img" v-if="item.diff.arrived_num>0" src="../../assets/top.png" alt="">
                      <img class="img" v-else src="../../assets/bottom.png" alt="">
                      <div style="font-size:12px;color:#f00"  v-if="item.diff.arrived_num>0">{{`${item.diff.arrived_num?Math.abs(item.diff.arrived_num):''}` }}</div>
                      <div style="font-size:12px;color:#07a847"  v-else>{{`${item.diff.arrived_num?Math.abs(item.diff.arrived_num):''}` }}</div>
                    </div>
                  </div>
                  <div style="font-size:14px;color:#888;font-weight:bold;">
                    <span>¥{{Math.ceil(item.actual.arrived_cost)}}</span>
                    <span>/人</span>
                  </div>
                </div>
              </div>
              <div style="width:30%;padding-left:30px">
                <div style="color:#777">对话</div>
                <div style="border-right:1px solid #f2f2f2;font-weight:bold;">
                  <div style="display:flex;padding:12px 0">
                    <span style="font-size:22px;color:#555">{{item.actual.dialogue_num}}</span>
                    <div style="margin-left:10px;display:flex" v-if="item.diff.dialogue_num &&item.diff.dialogue_num!==0">
                      <img class="img" v-if="item.diff.dialogue_num>0" src="../../assets/top.png" alt="">
                      <img class="img" v-else src="../../assets/bottom.png" alt="">
                      <div style="font-size:12px;color:#f00" v-if="item.diff.dialogue_num>0">{{Math.abs(item.diff.dialogue_num)}}</div>
                      <div style="font-size:12px;color:#07a847" v-else>{{Math.abs(item.diff.dialogue_num)}}</div>
                    </div>
                  </div>
                  <div style="font-size:14px;color:#888;color:#888;font-weight:bold;">
                    <span>¥{{Math.ceil(item.actual.dialogue_cost)}}</span>
                    <span>/条</span>
                  </div>
                </div>
              </div>
              <div style="width:30%;padding-left:30px">
                <div style="color:#777">确诊对话</div>
                <div >
                  <div style="display:flex;padding:12px 0;font-weight:bold;">
                    <span style="font-size:22px;color:#555">{{item.actual.qz_dialogue_num}}</span>
                    <div style="margin-left:10px;display:flex" v-if="item.diff.qz_dialogue_num &&item.diff.qz_dialogue_num!==0">
                      <img class="img" v-if="item.diff.qz_dialogue_num>0" src="../../assets/top.png" alt="">
                      <img class="img" v-else src="../../assets/bottom.png" alt="">
                      <div style="font-size:12px;color:#f00" v-if="item.diff.qz_dialogue_num>0">{{Math.abs(item.diff.qz_dialogue_num)}}</div>
                      <div style="font-size:12px;color:#07a847" v-else>{{Math.abs(item.diff.qz_dialogue_num)}}</div>
                    </div>
                  </div>
                  <div style="font-size:14px;color:#888;color:#888;font-weight:bold;">
                    <span>¥{{Math.ceil(item.actual.qz_dialogue_cost)}}</span>
                    <span>/条</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      <!-- 日期选择 -->
      <van-popup
        v-model="onShow"
        position="bottom"
        :overlay="true"
        :style="{ height: '40%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          :min-date="minDate"
          @confirm="handleStartTimeOnshow"
          @cancel="handleCancelOnshow"
        />
      </van-popup>
        <!-- 项目选择 -->
      <van-popup v-model="showChannel" round position="bottom">
        <van-picker
          show-toolbar
          :columns="dataChannel"
          @cancel="handleChannel"
          @confirm="changeproject"
      />
      </van-popup>
      <!-- 中心选择 -->
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>

  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      chicoMouth: `${new Date().getFullYear()}-${new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1}`,
      onShow: false,
      currentDate: new Date(),
      minDate: new Date(2018, 0),
      showPicker: false,
      config: [], // 中心数据
      centerName: '',
      net_config_id: '',
      project: [], // 项目
      projectName: '',
      project_id: '',
      columns: [],
      dataChannel: [],
      showChannel: false,
      data: {},
      newtime: `${new Date().getFullYear()}-${new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1}`,
      actual: {},
      bool: true
    }
  },
  created () {
    this.getSchedulecenterList()
  },
  methods: {
    // 时间选择开始
    TimeSele () {
      this.onShow = true
    },
    handleStartTimeOnshow (value) {
      let d = new Date(value)
      let mouth = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
      let time = d.getFullYear() + '-' + mouth
      if (time > `${new Date().getFullYear()}-${new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1}`) {
        this.$toast('之后日期不可查询')
      } else {
        this.isActive = false
        this.onShow = false
        this.chicoMouth = time
        this.getSchedulUrl()
      }
    },
    handleCancelOnshow () {
      this.onShow = false
    },
    // 时间选择结束
    // 项目下拉选择
    channelSele () {
      this.dataChannel = this.project.map(item => item.label)
      this.showChannel = true
    },
    changeproject (value) {
      this.projectName = value
      this.project.forEach(el => {
        if (el.label === value) {
          this.project_id = el.value
        }
      })
      this.getSchedulecenterList()

      this.showChannel = false
    },
    handleChannel () {
      this.showChannel = false
    },
    // 切换中心、
    changecenter () {
      this.columns = this.config.map(item => item.label)
      this.showPicker = true
    },
    // 中心下拉选择
    onConfirm (value) {
      this.centerName = value
      this.config.forEach(el => {
        if (el.label === value) {
          this.net_config_id = el.value
        }
      })
      // this.getSchedulecenterList()
      this.getSchedulecenterList()
      this.showPicker = false
    },
    // 获取项目中心列表
    getSchedulecenterList () {
      this.$http({
        method: 'get',
        url: this.api.schedulecenter,
        params: {
          net_config_id: this.net_config_id,
          project_id: this.project_id
        }
      }).then((res) => {
        this.config = [{value: '', label: '全部'}]
        this.project = res.data.data.project
        this.config.push(...res.data.data.config)
        if (this.bool) {
          this.bool = false
          this.project_id = this.project[0] ? this.project[0].value : ''
          this.projectName = this.project[0] ? this.project[0].label : ''
        }
        this.getSchedulUrl()
        // this.columns = res.data.data
      }).catch((e) => {
        this.$toast.fail('网络开小差了')
      })
    },
    // 获取列表数据
    getSchedulUrl () {
      this.loading = true
      this.$http({
        method: 'get',
        url: this.api.scheduleUrl,
        params: {
          month: this.chicoMouth,
          net_config_id: this.net_config_id,
          project_id: this.project_id
        }
      }).then((res) => {
        this.data = res.data.data
        this.data.finish_rate = +this.data.finish_rate
        this.loading = false
      }).catch((e) => {
        this.$toast.fail('网络开小差了')
      })
    }

  }

}
</script>

<style scoped>
  .box{
    width: 100%;
  }
  .boxhead{
    width: 100%;
    height: 160px;
    background:#0658d4;
  }
    .searchform{
    padding: 15px 10px;
  }
  .sele-mouth {
    display: inline-block;
    width: 35%;
    height: 32px;
    line-height: 32px;
    border-radius:3px;
    vertical-align: middle;
    background: #fff;
    color:#555;
    position: relative;
  }
  .sele-mouth img {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 8px;
    left: 7px;
  }
  .sele-mouth span {
    font-size:14px;
    color:#333;
    vertical-align: top;
    margin-left: 33px;
    line-height: 32px;
  }
  .van-icon-arrow-down{
    position: absolute;
    right: 7px;
    top: 8px;
    color: #888;
  }
  .mall{
    width: 25%;
  }
  .exponent{
    padding:18px 36px;
    display: flex;
    justify-content: space-between;
    color: #dae8fd;
    font-weight:bold;
  }
  .exponLeft{
    display: flex;
    justify-content: flex-start;
  }
  .exponLeft img{
    padding-top:16px;
    width: 15px;
    height: 15px;
  }
  .exponRight{
    width: 118px;
    height: 32px;
    border-radius: 19px;
    background-color: #c9dfff;
    font-size: 16px;
    font-weight: bold;
    color:#0658d4;
    text-align: center;
    line-height: 32px;
    margin-top:5px;
    box-shadow: 0 3px 6px 5px #0852c3;
  }
  /* 卡片card */
  .card{
    background: #0658d4;
    padding:0 32px 16px 32px;
  }
  .cardtop{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
    padding: 0 6px;
  }
  .cardleft{
    width: 45%;

  }
  .font{
    color:#98b7e6;
    padding-bottom:5px;
  }
  .count{
    font-size: 24px;
    font-weight: bolder;
    color:#dae8fd;
  }
  .cardright{
    /* text-align: center; */
    margin-left: 36px;
    flex: 1;
  }
  .progress{
    display: flex;
    justify-content: flex-start;
  }
  .listbox{
    padding: 18px 32px;
    border-bottom:1px solid #f2f2f2;

  }
  .formlist{
    display:flex;
    margin-top:12px;
  }
  .listhead{
    display: flex;
    justify-self: flex-start;
    color:#666;
  }
  .img{
    width: 15px;
    height: 15px;
  }
  .xiangmu{
    margin-left: 10px !important;
  }
</style>
<style>
.van-progress .van-progress__pivot{
    display: none !important;
  }
.van-progress{
    background: #042b96;
}
  .loading{
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,.3);
      z-index: 999;
  }
</style>
